<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="usersList" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" width="width"></el-table-column>
                <el-table-column prop="username" label="姓名" width="width"></el-table-column>
                <el-table-column prop="email" label="邮箱" width="width"></el-table-column>
                <el-table-column prop="mobile" label="电话" width="width"></el-table-column>
                <el-table-column prop="role_name" label="角色" width="width"></el-table-column>
                <el-table-column prop="mg_state" label="状态" width="width">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="width">
                    <template slot-scope="scope">
                        <el-button type="primary" class="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                        <el-button type="danger" class="el-icon-delete" size="mini" @click="removeById(scope.row.id)"></el-button>
                        <el-tooltip effect="dark" content="分配权限" placement="top" :enterable='false'>
                            <el-button type="warning" class="el-icon-setting" size="mini" @click="showSetRoleDialog(scope.row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加用户 -->
        <el-dialog  title="添加用户"  :visible.sync="addDialogVisible"  width="50%">
        <el-form ref="addFormRef" :model="addForm" label-width="80px" :rules="addFormRules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="addForm.mobile"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 编辑用户 -->
        <el-dialog  title="修改用户"  :visible.sync="editDialogVisible"  width="50%">
        <el-form ref="editFormRef" :model="editForm" label-width="80px" :rules="editFormRules">
            <el-form-item label="用户名">
                <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="editForm.mobile"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 分配角色对话框 -->
        <el-dialog  title="分配角色"  :visible.sync="setRoleDialogVisible"  width="50%">
        <div>
            <span>分配角色</span>
            <p>当前的用户：{{userinfo.username}}</p>
            <p>当前的角色：{{userinfo.role_name}}</p>
            <span>分配新角色：
                <el-select v-model="selectedId" placeholder="请选择">
                    <el-option
                        v-for="item in rolesList"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </span>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRole">确 定</el-button>
        </span>
        </el-dialog>


    </div>
</template>
<script>
export default {
   data() {
      return {
          usersList:[],
          addForm:{
              username:'',
              password:'',
              email:'',
              mobile:''
          },
          addFormRules:{
              username:[
                  {required: true, message:'请输入用户名', trigger: 'blur'},
                  {require: true, min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
              password:[
                  {required: true, message:'请输入密码', trigger: 'blur'},
                  {require: true, min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }],
              email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },
              {patten:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message:'格式不正确', trigger: 'blur'}],
              mobile:[{ required: true, message: '请输入手机号', trigger: 'blur' },
              {patten:/^[1]([3-9])[0-9]{9}$/, message:'格式不正确', trigger: 'blur'}]
          },
          addDialogVisible:false,
        //   编辑
          editDialogVisible:false,
          editForm:{
              username:'',
              email:'',
              mobile:''
          },
          editFormRules:{
              username:[
                  {required: true, message:'请输入用户名', trigger: 'blur'},
                  {require: true, min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
              password:[
                  {required: true, message:'请输入密码', trigger: 'blur'},
                  {require: true, min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }],
              email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },
              {patten:/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message:'格式不正确', trigger: 'blur'}],
              mobile:[{ required: true, message: '请输入手机号', trigger: 'blur' },
              {patten:/^[1]([3-9])[0-9]{9}$/, message:'格式不正确', trigger: 'blur'}]
          },
          setRoleDialogVisible:false,
          userinfo:null,
          selectedId:null,
          rolesList:[]
      }
   },
   created(){
       this.getUsersList()
   },
   computed:{
   },
   methods:{
       //获取用户列表
       async getUsersList(){
           const{data:res}=await this.$http.get('users',{
               params:{pagenum:1,pagesize:10}
           })
           console.log(res)
           if(res.meta.status!==200){
            return this.$message.error('获取用户列表失败')
           }
        //    this.$message.success('获取用户列表成功')
           this.totalUser=res.data.total
           this.usersList=res.data.users
       },
    //    监听switch开关改变
      async userStateChange(userinfo){
          const{data:res}=await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
          console.log(res)
          if(res.meta.status!==200){
           return this.$message.error('更新用户状态失败')
          }
          //提示添加用户成功
          this.$message.success('更新用户状态成功')
          this.getUsersList()
       },

       //添加用户
       async addUser(){
           const{data:res}=await this.$http.post('users', this.addForm)
           console.log(res)
           if(res.meta.status!==201){
            return this.$message.error('添加用户失败')
           }
             //关闭对话框
             this.addDialogVisible=false
            //刷新用户列表
            this.getUsersList()
           //提示添加用户成功
           this.$message.success('添加用户成功')

       },
    //    编辑
       async showEditDialog(id){
           this.editDialogVisible=true
           const{data:res}=await this.$http.get(`users/${id}`)
           if(res.meta.status!==200){
               this.$message.error('查询用户失败')
           }
           this.editForm=res.data

       },
    //    编辑用户
    async editUser(){
        const{data:res}=await this.$http.put(`users/${this.editForm.id}`,{
            email:this.editForm.email,mobile:this.editForm.mobile
        })
        if(res.meta.status!==200){
            this.$message.error('更新用户信息失败')
        }
        this.editDialogVisible=false,
        this.$message.success('更新用户信息成功')
        this.getUsersList()
    },
    // 删除
    async removeById(id){
        const{data:res}=await this.$http.delete(`users/${id}`)
        if(res.meta.status!==200){
            return this.$message.error('删除用户失败')
        }
        this.$message.success('删除用户成功')
        this.getUsersList()
    },
    // 角色对话框
    showSetRoleDialog(userinfo){
        this.setRoleDialogVisible=true
        console.log(userinfo)
        // 列表
        const{data:res}=await this.$http.get('roles')
        console.log(res)
        if(res.meta.status!==200){
         return this.$message.error('失败')
        }
          
         this.rolesList=res.data
        //提示添加用户成功
        this.$message.success('成功')

        console.log(rolesList)

    },
    // 分配权限
    async setRole(id){
        const{data:res}=await this.$http.put(`users/${id}/role`)
        console.log(res)
        if(res.meta.status!==200){
         return this.$message.error('设置角色失败')
        }
          //关闭对话框
          this.setRoleDialogVisible=false
         //刷新用户列表
         this.getUsersList()
        //提示添加用户成功
        this.$message.success('设置角色成功')
    }


   },
}
</script>
<style lang="less" scoped>

</style>
